<script setup>
import footerComm from "@/components/footer/index.vue";
</script>


<template>
  <div class="list">
    <div class="advert"></div>

    <div class="container">
      <div id="photoApp">
        <div class="row">
          <div class="parent" style="column-count: 4; column-gap: 30px">
            <div class="item" style="margin-bottom: 30px">
              <div class="pho">
                <a href="#"><img src="/img/20220831205032_2fb4a.jpeg" /></a>
              </div>
              <div class="info"></div>
            </div>
            <div class="item" style="margin-bottom: 30px">
              <div class="pho">
                <a href="#"><img src="/img/20220728175539_d684d.jpeg" /></a>
              </div>
              <div class="info"></div>
            </div>
            <div class="item" style="margin-bottom: 30px">
              <div class="pho">
                <a href="#"><img src="/img/hu3.png" /></a>
              </div>
              <div class="info"></div>
            </div>
            <div class="item" style="margin-bottom: 30px">
              <div class="pho">
                <a href="#"><img src="/img/20220831205032_2fb4a.jpeg" /></a>
              </div>
              <div class="info"></div>
            </div>
            <div class="item" style="margin-bottom: 30px">
              <div class="pho">
                <a href="#"><img src="/img/hu3.png" /></a>
              </div>
              <div class="info"></div>
            </div>
            <div class="item" style="margin-bottom: 30px">
              <div class="pho">
                <a href="#"><img src="/img/20220831205032_2fb4a.jpeg" /></a>
              </div>
              <div class="info"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <footer-comm />
</template>
<style scoped lang="scss">
.list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 1200px;
  margin: 10px auto 0 auto;
  flex-direction: column;
  .advert {
    width: 100%;
    display: block;
    height: 5rem;
    background: url("/img/hu1.jpeg") no-repeat;
    background-size: 100% 100%;
    margin: 10px auto 0 auto;
  }
  .container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 15px;
  }
  .pho {
    width: 235px;
    img {
      width: 100%;
      vertical-align: bottom;
      border-style: none;
    }
  }
}
</style>